<template>
  <div class="fire-box">
    <FrameLayout>
      <template v-slot:left>
        <Frame title="风险评估" style="height: 16%">
          <template v-slot:body>
            风险评估
          </template>
        </Frame>
        <Frame
          title="外因火灾监测"
          style="height: 83%"
        >
          <template v-slot:body>
            外因火灾监测
          </template>
        </Frame>
      </template>
      <template v-slot:center>
        <div class="side-bars">
          <TwoThree />
          <div class="btn" @click="$store.dispatch('dlgName','井下通知')">井下通知</div>
        </div>
        <Dlgdiv v-if="$store.getters.dlgName == '井下通知'" mask style="width: 40%;height: 58%;left: 28%;top: 20%">
          <template v-slot:title>井下通知</template>
          <template v-slot:body><DlgNotice /></template>
        </Dlgdiv>
      </template>
      <template v-slot:right>
        <Frame title="制氮机房监测" style="height: 46%">
          <template v-slot:body>
            制氮机房监测
          </template>
        </Frame>
        <Frame title="灌浆机房监测" style="height: 53%">
          <template v-slot:body>
            灌浆机房监测
          </template>
        </Frame>
      </template>
    </FrameLayout>

  </div>
</template>
<script>
import DlgNotice from '@/views/components/DlgNotice'
export default {
    name: '',
    components: {
        DlgNotice
    },
    data() {
        return {
            dlgName: '',
            poiType: 'fire'
        }
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
.fire-box {
  width: 100%;
  height: 100%;
}
.scope {
  height: 100%;
}
.PolygonBox {
  width: 68px;
  height: 24px;
  font-size: 14px;
  i {
    margin-left: 5px;
  }
  span {
    cursor: pointer;
  }
}
.timeChange {
  min-width: 140px;
  height: 100%;
  padding: 0 15px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-top: -16px;
}
.active {
  background: url("~@/assets/img/fireTable.png") no-repeat;
  background-size: 100% 100%;
}
</style>

